<script lang="tsx">
import {
  defineComponent,
  ref,
  computed,
  type PropType,
  type ExtractPropTypes
} from 'vue'
import { ElButton } from 'element-plus'
import { merge } from 'lodash-es'
import { getValOrFnResult } from '../form/utils'
import oFormFactory, {
  oFormProps,
  type iFormColumnType
} from '../form/factory.vue'
export interface iHeaderOptionsProps {
  columns: Array<iFormColumnType>
  title?: string
}
export const oHeaderProps = {
  headerOptions: {
    type: Object as PropType<iHeaderOptionsProps>
  }
}
export type oHeaderPropsType = ExtractPropTypes<typeof oHeaderProps>
export default defineComponent({
  components: { oFormFactory },
  props: oHeaderProps,
  setup(props: oHeaderPropsType, context) {
    const headerOptionsSync = computed(() => {
      const obj = merge(
        {
          labelWidth: 0,
          inline: true,
          title: '',
          columns: [] as Array<iFormColumnType>
        },
        props.headerOptions
      )
      obj.title = getValOrFnResult(obj.title)
      obj.columns.forEach(colItem => {
        colItem.type = colItem.type || 'primary'
        colItem.size = colItem.type || 'small'
      })
      return obj
    })
    return () => (
      <section class="one-header">
        <div class="header_title">{headerOptionsSync.value.title}</div>
        <div>
          <oFormFactory formOptions={headerOptionsSync} />
        </div>
      </section>
    )
  }
})
</script>
<style lang="scss" scoped>
section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  :deep(.el-form--inline div.el-form-item) {
    margin-right: 0;
    margin-bottom: 0;
  }
}
.header_title {
  font-size: 14px;
  padding-left: 8px;
  border-left: 5px solid #13a3f9;
  color: #64748e;
}
</style>
